<template>
    <div style="width: 1000px;height: 600px;" ref="chart"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { ref, onMounted } from 'vue';
let chart = ref();
onMounted(() => {
    let chartDom = chart.value;
    let myChart = echarts.init(chartDom);
    let option = {
        title: {
            text: 'Funnel'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}%'
        },
        toolbox: {
            feature: {
                dataView: { readOnly: false },
                restore: {},
                saveAsImage: {}
            }
        },
        legend: {
            data: ['Visit', 'Visit1', 'Visit2', 'Visit3', 'Visit4']
        },
        grid: {
            containLabel: true,
            left: 0,
            bottom: 0,
            right: 0,
            top: 0
        },
        series: [
            {
                name: 'Funnel',
                type: 'funnel',
                orient: 'horizontal',
                width: '10%',
                left: 0,
                minSize: 60,
                maxSize: 60,
                sort: 'descending',
                gap: 2,
                label: {
                    show: true,
                    position: 'inside'
                },
                labelLine: {
                    length: 10,
                    lineStyle: {
                        width: 1,
                        type: 'solid'
                    }
                },
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                emphasis: {
                    label: {
                        fontSize: 20
                    }
                },
                data: [
                    { value: 60, name: 'Visit' },
                ]
            },
            {
                name: 'Funnel',
                type: 'funnel',
                orient: 'horizontal',
                width: '20%',
                left: '10%',
                minSize: 80,
                maxSize: 80,
                sort: 'descending',
                gap: 2,
                label: {
                    show: true,
                    position: 'inside'
                },
                labelLine: {
                    length: 10,
                    lineStyle: {
                        width: 1,
                        type: 'solid'
                    }
                },
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                emphasis: {
                    label: {
                        fontSize: 20
                    }
                },
                data: [
                    { value: 60, name: 'Visit1' },
                ]
            },
            {
                name: 'Funnel',
                type: 'funnel',
                orient: 'horizontal',
                width: '20%',
                left: '30%',
                minSize: 100,
                maxSize: 100,
                sort: 'descending',
                gap: 2,
                label: {
                    show: true,
                    position: 'inside'
                },
                labelLine: {
                    length: 10,
                    lineStyle: {
                        width: 1,
                        type: 'solid'
                    }
                },
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                emphasis: {
                    label: {
                        fontSize: 20
                    }
                },
                data: [
                    { value: 60, name: 'Visit2' },
                ]
            },
            {
                name: 'Funnel',
                type: 'funnel',
                orient: 'horizontal',
                width: '20%',
                left: '30%',
                minSize: 100,
                maxSize: 100,
                sort: 'descending',
                gap: 2,
                label: {
                    show: true,
                    position: 'inside'
                },
                labelLine: {
                    length: 10,
                    lineStyle: {
                        width: 1,
                        type: 'solid'
                    }
                },
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                emphasis: {
                    label: {
                        fontSize: 20
                    }
                },
                data: [
                    { value: 60, name: 'Visit2' },
                ]
            },
            {
                name: 'Funnel',
                type: 'funnel',
                orient: 'horizontal',
                width: '40%',
                left: '50%',
                minSize: 120,
                maxSize: 120,
                sort: 'descending',
                gap: 2,
                label: {
                    show: true,
                    position: 'inside'
                },
                labelLine: {
                    length: 10,
                    lineStyle: {
                        width: 1,
                        type: 'solid'
                    }
                },
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                emphasis: {
                    label: {
                        fontSize: 20
                    }
                },
                data: [
                    { value: 60, name: 'Visit3' },
                ]
            },
            {
                name: 'Funnel',
                type: 'funnel',
                orient: 'horizontal',
                width: '10%',
                left: '90%',
                minSize: 60,
                maxSize: 60,
                sort: 'descending',
                gap: 2,
                label: {
                    show: true,
                    position: 'inside'
                },
                labelLine: {
                    length: 10,
                    lineStyle: {
                        width: 1,
                        type: 'solid'
                    }
                },
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                emphasis: {
                    label: {
                        fontSize: 20
                    }
                },
                data: [
                    { value: 60, name: 'Visit4' },
                ]
            }
        ]
    };
    myChart.setOption(option)
})
</script>